<template>
  <el-menu class="el-menu-vertical-demo" active-text-color="#409eff" text-color="#333" background-color="#fff" :default-active="activeMenu">
    <router-link to="/index">
      <el-menu-item index="Index" class="item_home" style="background-color:#409EFF; color:#fff">
        <template slot="title">
          <i class="el-icon-s-home" style="color: #fff;"></i>
          <span>首页</span>
        </template>
      </el-menu-item>
    </router-link>
    <!-- 循环显示菜单数据 -->
    <el-submenu :index="item.name" v-for="(item, index) in menuList" :key="index">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <!-- 循环显示 系统管理子菜单 Begin -->
      <router-link :to="child.path" v-for="(child, i) in item.children" :key="i">
        <el-menu-item :index="child.name" @click="selectMenu(child)">
          <template slot="title">
            <i :class="child.icon"></i>
            <span>{{ child.title }}</span>
          </template>
        </el-menu-item>
      </router-link>
      <!-- 循环显示 系统管理子菜单 End -->
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuList: JSON.parse(sessionStorage.getItem("menuList")),
      // menuList: this.$store.state.menus.menuList
    }
  },
  computed: {
    activeMenu() {
      return this.$store.state.menus.TabsValue
    }
  },
  created() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      this.$axios.get('/menu/nav').then(response => {
        this.menuList = response.data.resultdata.nav
      }).catch(e => {
        console.log(e);
      })
    },
    selectMenu(child) {
      // 需要使用 child 数据 创建一个 Tab 选项卡对象。
      let tab = {
        icon: child.icon,
        name: child.name,
        title: child.title
      }

      // 调用 Vuex 的 ADD_TABS 方法，添加选项卡数组中
      this.$store.commit('ADD_TABS', tab)
    }
  }
}
</script>

<style scoped>
.el-menu { height: 100%; }
a { text-decoration: none; }
</style>
